<template>
    <div style="background-color: #FFF7EF;">
        <div class="sidebar">
            <ul>
                    <li :class="{ active: activeTab === 'personalInfo' }" @click="navigateTo('personalInfo')">个人信息</li>
                    <li :class="{ active: activeTab === 'changePassword' }" @click="navigateTo('changePassword')">修改密码</li>
            </ul>
        </div>
        <div><router-view /></div>
    </div>
</template>
  
<script>
import { RouterView } from 'vue-router';

export default {
    data() {
        return {
            activeTab: ""
        };
    },
    methods: {
        navigateTo(tab) {
            this.activeTab = tab;
            this.$emit("tab-change", tab);
            // Perform navigation to the corresponding route
            if (tab === "personalInfo") {
                this.$router.push("/main/personal/info");
            }
            else if (tab === "changePassword") {
                this.$router.push("/main/personal/password");
            }
        }
    },
    mounted() {
        // Set the active tab based on the current route
        const currentPath = this.$route.path;
        if (currentPath.includes("/main/personal/info")) {
            this.activeTab = "personalInfo";
        }
        else if (currentPath.includes("/main/personal/password")) {
            this.activeTab = "changePassword";
        }
    },
    components: { RouterView }
};
</script>
  
<style scoped>
.sidebar {
    width: 200px;
    background-color: #FFF7EF;
    padding: 20px;
    border-radius: 4px;
    float: left
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    cursor: pointer;
    padding: 10px 0;
    font-weight: bold;
}

.sidebar li.active {
    color: #FF9000;
}
</style>  